<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      /* 
            函数作用域
                - 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
                - 每调用一次函数就会创建一个新的函数作用域,他们之间是相互独立的。
                - 在函数作用域中可以访问到全局作用域的变量,
                        在全局作用域中无法访问到函数作用域的变量
                - 当在函数作用域操作一个变量时,它会现在自身作用域中寻找,如果有就直接使用
                        如果没有则向上一级作用域中寻找,直到找到全局作用域,
                        如果全局作用域中依然没有找到,则会报错ReferenceError.
                - 在函数中要访问全局变量可以使用Window对象
        */
      function fun() {
        var b = 20;
        var a = '我是fun函数中的变量a';

        console.log('a = ' + a);
      }

      fun();

      console.log(b);

      /* 
        在函数作用域中也有声明提前的特性,
          使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
          函数声明也会再函数中所有的代码执行之前执行
      */
      function fun3() {
        console.log(a);
        var a = 35;

        function fun4() {
          alert("I'm fun4");
        }
      }

      var c = 33;
      /* 
        在函数中,不使用var声明的变量,都会成为全局变量
      */
      function fun5() {
        console.log('c = ' + c); //33,因为这里没有声明
        c = 10;
      }

      function fun5(params) {
        d = 100; //d没有使用var关键字,则会设置为全局变量 相当于window.d = 100
      }

      fun5();

      //在全局输出c
      console.log('c = ' + c);

      var e = 23;
      /* 
        定义形参就相当于在函数作用域中声明了变量
      */
      function fun6(e) {
        // var e 定义形参e,相当于var e
        alert(e);
      }
      fun6();
    </script>
  </head>
  <body></body>
</html>
